<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fruit{
            display: flex;
            width: 200px;
            height: 30px;
            justify-content:space-between;
            align-items:center;
        }
        .price-container{
            display: flex;
            width: 100px;
            height:100%;
            align-items:center;
        }
        
    </style>
</head>
<body>
    <div id="app">
        <list-item v-for="(item,index) in list"
                :item="item" :index="index"
                :key="index"
                @add="addHandler"
                @sub="subHandler"
        ></list-item>
        <div>
            总价：{{ total | currencyRMB}}
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.filter('currencyRMB',(v)=>{
            return `¥${v.toFixed(2)}`
        })
        const listItem = {
            template:`
                <div class='fruit'>
                    <div> {{ item.name }}</div>
                    <div class="price-container">
                        <div>{{ item.price | currencyRMB }}</div>
                        <div @click='sub'>-</div>
                        <div>{{ item.count }}</div>
                        <div @click='add'>+</div>
                    </div>
                </div>
            `,
            props:{
                item:{
                    type:Object,
                    default:{}
                },
                index:{
                    type:Number
                }
            },
            methods:{
                sub(){
                    this.$emit('sub',this.item)
                },
                add(){
                    this.$emit('add',this.index)
                }
            }
        }



        let vm = new Vue({
            el:'#app',
            components:{
                'list-item':listItem
            },
            data(){
                return {
                    list:[
                        {name:'香蕉',price:10,count:1},
                        {name:'苹果',price:20,count:1},
                        {name:'榴莲',price:30,count:1},
                        {name:'葡萄',price:50,count:1},
                    ]
                }
            },
            computed:{
                total(){
                    let sum = 0;
                    this.list.forEach((item)=>{
                        sum+=item.price * item.count
                    })
                    return sum 
                }
            },
            methods:{
                subHandler(item){
                    if(item.count>1){
                        item.count--
                    }else{
                        alert('数量不能小于1')
                    } 
                },
                addHandler(index){
                    if(this.list[index].count<4){
                        this.list[index].count++
                    }else[
                        alert('数量不能大于4')
                    ]
                }
            }
        })
    </script>
</body>
</html>